<style scoped lang="less">
	.demonstration{
		margin-right:15px;
		margin-left:15px;
	}
	.vipmassge{
		margin-right:15px ;
	}
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}
	.item1,.item2{
		display: flex;
		flex-wrap: wrap;
	}
	.el-table{
		width: 100vh;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}

	.avatar-uploader .avatar {
	  width: 120px;
	  height: 120px;
	
	  display: block;
	}
	.el-table .cell{
		text-align: center !important;
		.el-button{
			color: #4b5db9;
		}
	}
	
	.avatar-uploader .el-upload {
	  border: 1px dashed var(--el-border-color);
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 120px;
	  height: 120px;
	border: 1px solid #ccc;
	  text-align: center;
	}
	img{
		width: 65px;
	}
	.icon{
		color: #eca146;
	}
</style>
<template>
	<div class="common-layout" v-if="flag">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3>
			 	商品评价
				<el-button plain type="primary" @click="addOwnevaluate">添加自评</el-button>
			</h3>
			<div class="item1">
				<el-form-item label="商品名称" label-width="90">
					<el-input
						placeholder="请输入商品名称"
						v-model="eavaluate"
					>
					</el-input>
				</el-form-item>
			 	<el-button
			 	type="primary"
				@click="searchevaluate"
			 	>搜索</el-button>
			 	<el-button
			 	type="plain"
				@click="replay"
			 	>重置</el-button>
			</div>
	
			<el-table :data="tableData" style="width: 95%; margin: 0 auto;" height="55vh">
			    <el-table-column label="商品信息">
					<template #default="{ row }">
						<img :src="downloadUrl+row.goods_image" class="avatar" />
						{{row.goods_name}}
					</template>
				</el-table-column>
				<el-table-column label="评价内容">
					<template #default="{ row }">
						{{row.comment_content}}
					</template>
				</el-table-column>
				<el-table-column prop="comment_level" label="评价等级">
					<template #default="{ row }">
						<el-rate v-model="row.comment_level" disabled/>
					</template>
				</el-table-column>
				<el-table-column prop="comment_status" label="审核状态"></el-table-column>
				<el-table-column prop="create_time" label="评价时间"></el-table-column>
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button plain link  @click="recell(row.comment_id)">回复</el-button>
						<el-button plain link @click="delreply(row.comment_id)">删除</el-button>
						<el-button plain link @click="playTop(row.comment_id)">置顶</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 商家回复 -->
			<el-dialog v-model="dialogFormVisible" title="商家回复" width="500">
			    <!-- <h3>商家回复</h3> -->
				<el-form >
			      <el-form-item>
					<el-input
				    v-model="content"
				    style="width: 80%;height: 80px; margin: 0 auto;"
				    :rows="4"
				    type="textarea"
				    placeholder="请输入恢复"
					autocomplete="off"
				  />
			      </el-form-item>
			    </el-form>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogFormVisible = false">取消</el-button>
			        <el-button type="primary" @click="recellsrue">
			          确认
			        </el-button>
			      </div>
			    </template>
			</el-dialog>
			<!-- 添加自评 -->
			<el-dialog v-model="ownevaluate" title="添加自评" width="500">
				<el-form :model="form">
			      <el-form-item label="商品信息">
					<el-select
					 style="width: 240px"
					  v-model="goodsvalue"
					  clearable
					  placeholder="请选择商品"
					>
					  <el-option
					    v-for="item in goodsoptions"
					    :key="item.value"
					    :label="item.goods_name"
					    :value="item.goods_id"
					  />
					</el-select>
			      </el-form-item>
				  <el-form-item label="会员头像">
				  	<el-upload
				  		    class="avatar-uploader"
				  		    :action="uploadUrl"
				  		    :show-file-list="false"
				  		    :on-success="handleAvatarSuccess"
				  		    :before-upload="beforeAvatarUpload"
				  		  >
				  		    <img v-if="headPhimageUrl" :src="headPhimageUrl" class="avatar" />
				  		    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				  		  </el-upload>
				  </el-form-item>
				  <el-form-item label="会员名称">
				  	<el-input
				    v-model="form.vipname"
				    style="width: 240px;"
				    placeholder="请输入会员名称"
				  	autocomplete="off"
				  />
				  </el-form-item>
				  <el-form-item label="评价时间">
					<div class="block">
					      <el-date-picker
					        v-model="form.timevalue"
					        type="datetime"
					        placeholder="Pick a Date"
					        format="YYYY-MM-DD HH:mm:ss"
					        date-format="MMM DD, YYYY"
					        time-format="HH:mm"
							style="width: 240px;"
					      />
					  </div>  
				  </el-form-item>
				  <el-form-item label="是否匿名">
					  <el-radio-group v-model="ifname">
						 <el-radio :value="1">匿名</el-radio>
						 <el-radio :value="0">不匿名</el-radio>
					   </el-radio-group>
				  </el-form-item>
				  
				  <el-form-item label="评价等级">
					
						  <el-rate v-model="form.evaluategrade"/>
				  </el-form-item>
				  <el-form-item label="评价内容">
				  		<el-input
				  		  v-model="form.evaluatecontent"
						  type="textarea"
						  :rows="4"
				  		  style="width: 240px;"
				  		  placeholder="请输入评价内容"
				  		autocomplete="off"
				  		/>
				  </el-form-item>
				  <el-form-item label="评价图片">
					<el-upload
						class="avatar-uploader"
						:action="uploadUrl"
						:show-file-list="false"
						:on-success="ehandleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					  >
						<img v-if="evaluatePhimageUrl" :src="evaluatePhimageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					  </el-upload>
				  </el-form-item>
			    </el-form>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="ownevaluate = false">取消</el-button>
			        <el-button type="primary" @click="makesure">
			          确认
			        </el-button>
			      </div>
			    </template>
			  </el-dialog>
			  
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
		 </el-main>
	   </el-container>
	 </div>
	 
	 <!-- 删除商品分类 -->
	 <el-dialog
	    v-model="dialogVisible"
	    title="提示"
	    width="500"
	  >
	  <el-icon class="icon"><WarningFilled /></el-icon>
	    <span>确定要删除该数据吗</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="define">确定</el-button>
	      </div>
	    </template>
	  </el-dialog>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { ref,reactive,onMounted,computed} from 'vue'
import {Search,Lock,Calendar} from '@element-plus/icons-vue'
import {
		getEvaluate,
		getReply,
		delReply,
		// evaluategrade,
		evaluategoods,
		addevaluate,
		GoTop
	} from "@/api";
import { uploadUrl,downloadUrl,baseUrl } from "@/utils/request";
import { Plus,WarningFilled } from '@element-plus/icons-vue'
import { number } from 'echarts';
import { ElMessage } from 'element-plus'

const flag=ref(true)
const dialogFormVisible=ref(false)
// const timevalue = ref('')
const ifname=ref (0)
const ownevaluate=ref(false)
let pageIndex=ref(1);
let pageSize=5;
let total=ref(0)
let tableData = ref([])
let eavaluate=ref()
const imageUrl = ref('')
const form = reactive({
	  goodsinfo:'',
	  vipname:'',
	  timevalue:'',
	  evaluatecontent:'',
	  evaluategrade:'',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: '',
	})
const evgrade = ref(0)
//点击添加自评
const addOwnevaluate=()=>{
	ownevaluate.value=true
}
//获取评价列表
const getevaluate = async () => {
		let res = await getEvaluate({	
			pageIndex: pageIndex.value,
			pageSize: pageSize,
		})
		tableData.value = res.commentList;
		total.value = res.pageCount;
		//处理时间
		tableData.value.forEach((v)=>{
			v.create_time = v.create_time.replace("T"," ")
		})
		// console.log(imageUrl.value);
		// console.log(res)
	}
// //搜索评论列表
const searchevaluate = async () => {
	let res = await getEvaluate({	
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		goodsName: eavaluate.value
	})
		tableData.value = res.commentList;
		total.value = res.pageCount;
		// console.log(res);
	}
// 回复评论
const recell = async (commentid) => {
	dialogFormVisible.value=true;
	sessionStorage.setItem("commentId",commentid)
}
//删除评论
let dialogVisible = ref(false)
let defineCommentid = ref("")
const delreply=async(commentid)=>{
	dialogVisible.value = true
	defineCommentid.value = commentid
}
//点击删除中的确定
const define = async ()=>{
	let res = await delReply({
		commentId: defineCommentid.value,
	})
		getevaluate()
		// console.log("删除",res);
		dialogVisible.value = false
		
		if(res == "1"){
			ElMessage.success({
				message:"删除成功"
			})
		}
}
//评论置顶
const playTop=async(commentid)=>{
	let res = await GoTop({
		commentId: commentid,
	})
		getevaluate()
		//console.log(res);
		if(res == "1"){
			ElMessage.success({
				message:"置顶成功"
			})
		}
}


//评论商品信息下拉框
const goodsvalue = ref('')
const goodsoptions = ref([])
const getgoodsselect=async()=>{
	let res = await evaluategoods()
		goodsoptions.value=res
		//console.log(res);
}
//评价等级下拉框
// const value1 = ref('')
// const options1 = ref([])
// const commentGrade=async()=>{
// 	let res = await evaluategrade()
// 		options1.value=res
// 		console.log(res);
// }
//上传会员图片和评价图片
	const headPhimageUrl = ref('')
	const handleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
		headPhimageUrl.value = URL.createObjectURL(uploadFile.raw)
		//formData.menuImage=response.data
	}
	
	const evaluatePhimageUrl = ref('')
	const ehandleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
		evaluatePhimageUrl.value = URL.createObjectURL(uploadFile.raw)
		//formData.menuImage=response.data
	}
	
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	
//点击确认添加自评
const makesure= async()=>{
	// console.log(form.timevalue);
	const originalDateTime = ref(form.timevalue);
	// const endDateTime = ref(Array.from(value1.value)[1]);
	const formattedDateTime = computed(() => {
		const date = new Date(originalDateTime.value);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	});	
	
	let data={
		commentContent:form.evaluatecontent,
		goodsId:Number(goodsvalue.value),
		peopleId:Number(sessionStorage.getItem("roleId")),
		commentType: sessionStorage.getItem("roleId")=="超级管理员" ? 0 : 1,
		commentLevel:form.evaluategrade,
		createTime:formattedDateTime.value,
		commentHide: Number(ifname.value) 
	}	
		// console.log(data);
		let res = await addevaluate(data)
		console.log("添加",res)	
		ownevaluate.value=false
		if(res == "评论成功"){
			ElMessage.success({
				message:"添加成功"
			})
		}else{
			ElMessage.error({
				message:"添加失败"
			})
		}
	
}	
//回复评价
let content = ref("")
const recellsrue=async()=>{
	let res = await getReply({
		commentId: Number(sessionStorage.getItem("commentId")),
		commentSuperior:content.value
	})
		dialogFormVisible.value=false;
		//console.log("回复",res);
		if(res == "1"){
			ElMessage.success({
				message:"回复成功"
			})
		}else{
			ElMessage.error({
				message:"回复失败"
			})
		}
}	
	onMounted(() => {
		getevaluate()
		// commentGrade()
		getgoodsselect()
	})
	
// //获取分页
const changePage=(page)=>{
	// console.log(page)
	pageIndex.value=page;
	getevaluate()
}

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  }
]
const replay=()=>{
		eavaluate.value=''
		searchevaluate();
	}

</script>
